	<template>
    <view>
        <!-- 第二层筛选 -->
        <view class="screening-box">
            <!-- 云单付款状态 -->
            <view
                @click="toggleBillYdStateMask('show')"
                v-if="orderData && orderData.billType == 1"
                >{{ filltersData.ydBillsState
                }}<text class="icon-font arrow-xiala-font">&#xe618;</text></view
            >

            <!-- 单据状态筛选 -->
            <view
                @click="toggleBillsStateMask('show')"
                v-if="orderData && orderData.billType == 2"
                >{{ filltersData.billsState
                }}<text class="icon-font arrow-xiala-font">&#xe618;</text></view
            >

            <!-- 时间筛选-->
            <view @click="toggleTimeStateMask('show')"
                >{{ filltersData.timeState
                }}<text class="icon-font arrow-xiala-font">&#xe618;</text></view
            >

            <!-- 门店筛选   检测用户是否有权 -->
            <view
                v-if="
                    isStores &&
                    (orderData.billType == 2 ||
                        orderData.billType == 20 ||
                        orderData.billType == 21 ||
                        orderData.billType == 22)
                "
                @click="toggleStoresStateMask('show')"
                >{{ filltersData.storesState
                }}<text class="icon-font arrow-xiala-font">&#xe618;</text></view
            >

            <!-- 云店列表筛选  -->
            <view
                @click="toggleYdListStateMask('show')"
                v-if="orderData && orderData.billType == 1"
            >
                {{ filltersData.ydListState
                }}<text class="icon-font arrow-xiala-font">&#xe618;</text></view
            >

            <!-- 经手人筛选  检测用户是否有权 -->
            <view
                v-if="
                    isHandlers &&
                    orderData &&
                    (orderData.billType == 2 ||
                        orderData.billType == 20 ||
                        orderData.billType == 21 ||
                        orderData.billType == 22)
                "
                @click="toggleHandlersStateMask('show')"
                >{{ filltersData.handlersState
                }}<text class="icon-font arrow-xiala-font">&#xe618;</text></view
            >
        </view>

        <!-- 云单付款状态筛选 -->
        <view
            class="cate-mask"
            :class="
                cateYdState === 0 ? 'none' : cateYdState === 1 ? 'show' : ''
            "
            :style="{
                left: isExpand ? '240px' : '',
            }"
            @click="toggleBillYdStateMask"
        >
            <view class="cate-content">
                <scroll-view scroll-y class="cate-list">
                    <view v-for="item in cateYdList" :key="item.id">
                        <view
                            class="cate-item"
                            :class="{
                                active:
                                    item.id == filltersData.ydBillStateIndex,
                            }"
                            @click="changeBillsYdStatus(item)"
                            >{{ item.title }}</view
                        >
                    </view>
                </scroll-view>
            </view>
        </view>

        <!-- 单据状态筛选 -->
        <view
            class="cate-mask"
            :class="
                cateBillsState === 0
                    ? 'none'
                    : cateBillsState === 1
                    ? 'show'
                    : ''
            "
            :style="{
                left: isExpand ? '240px' : '',
            }"
            @click="toggleBillsStateMask"
        >
            <view class="cate-content">
                <scroll-view scroll-y class="cate-list">
                    <view v-for="item in statisticalList" :key="item.id">
                        <view
                            class="cate-item"
                            :class="{
                                active:
                                    item.id == filltersData.statisticalIndex,
                            }"
                            @click="changeBillsState(item)"
                            >{{ item.title }}</view
                        >
                    </view>
                </scroll-view>
            </view>
        </view>

        <!-- 时间筛选-->
        <view
            class="cate-mask"
            :class="
                cateTimeState === 0 ? 'none' : cateTimeState === 1 ? 'show' : ''
            "
            :style="{
                left: isExpand ? '240px' : '',
            }"
            @click="toggleTimeStateMask"
        >
            <view class="cate-content">
                <scroll-view scroll-y class="cate-list">
                    <view v-for="item in timeStateList" :key="item.id">
                        <view
                            class="cate-item"
                            :class="{
                                active: item.id == filltersData.TimeStateIndex,
                            }"
                            @click="changeTimeState(item)"
                            >{{ item.title }}</view
                        >
                    </view>
                </scroll-view>
            </view>
        </view>

        <!-- 门店筛选   检测用户是否有权 -->
        <view
            class="cate-mask"
            :class="
                cateStoresState === 0
                    ? 'none'
                    : cateStoresState === 1
                    ? 'show'
                    : ''
            "
            :style="{
                left: isExpand ? '240px' : '',
            }"
            @click="toggleStoresStateMask"
        >
            <view class="cate-content">
                <view class="cate-list comm-list">
                    <view v-for="item in storesStateList" :key="item.id">
                        <view
                            class="cate-item"
                            :class="{
                                active:
                                    item.id == filltersData.StoresStateIndex,
                            }"
                            @click="changeStoresState(item)"
                            >{{ item.name }}</view
                        >
                    </view>
                </view>
            </view>
        </view>

        <!-- 云店店筛选   检测用户是否有权 -->
        <view
            class="cate-mask"
            :class="
                cateYdListState === 0
                    ? 'none'
                    : cateYdListState === 1
                    ? 'show'
                    : ''
            "
            :style="{
                left: isExpand ? '240px' : '',
            }"
            @click="toggleYdListStateMask"
        >
            <view class="cate-content">
                <view class="cate-list comm-list">
                    <view v-for="item in ydsList" :key="item.id">
                        <view
                            class="cate-item"
                            :class="{
                                active: item.id == filltersData.ydListStateIdex,
                            }"
                            @click="changeYdListState(item)"
                            >{{ item.name }}</view
                        >
                    </view>
                </view>
            </view>
        </view>

        <!-- 经手人筛选   检测用户是否有权 -->
        <view
            class="cate-mask"
            :class="
                cateHandlersState === 0
                    ? 'none'
                    : cateHandlersState === 1
                    ? 'show'
                    : ''
            "
            :style="{
                left: isExpand ? '240px' : '',
            }"
            @click="toggleHandlersStateMask"
        >
            <view class="cate-content">
                <view class="cate-list comm-list">
                    <view v-for="item in HandlersStateList" :key="item.uid">
                        <view
                            class="cate-item"
                            :class="{
                                active:
                                    item.uid == filltersData.HandlersStateIndex,
                            }"
                            @click="changeHandlersState(item)"
                            >{{ item.name }}</view
                        >
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import config from "../../js/conf/Config.js";
import accessCtrl from "../../js/limit/AccessCtrl.js";
import https from "../../js/https/Https.js";
import localStore from "../../js/LocalStore.js";
import { mapGetters } from "vuex";

export default {
    props: ["filltersData", "orderData"],
    computed: {
        	...mapGetters(["isExpand"]),
    },
    data() {
        return {
            isStores: true, //根据权限判断是否展示门店筛选
            isHandlers: true, //根据条件判断是否展示经手人筛选

            //云单列表
            cateYdState: 0,
            cateYdList: [
                {
                    title: "全部",
                    id: 13,
                },
                {
                    title: "已付款",
                    id: 1,
                },
                {
                    title: "待付款",
                    id: 3,
                },
            ],

            // 单据状态筛选
            cateBillsState: 0,
            statisticalList: [
                {
                    title: "已确认",
                    id: 2,
                },
                {
                    title: "待出库",
                    id: 4,
                },
                {
                    title: "已出库",
                    id: 5,
                },
                {
                    title: "欠款单",
                    id: 3,
                },
                {
                    title: "退款单",
                    id: 30,
                },
                {
                    title: "待处理",
                    id: 40,
                },
            ],
            //时间筛选
            cateTimeState: 0,
            timeStateList: [
                {
                    title: "全部日期",
                    id: "",
                },
                {
                    title: "今日",
                    id: 1,
                },
                {
                    title: "本月",
                    id: 2,
                },
                {
                    title: "本季",
                    id: 3,
                },
                {
                    title: "一年内",
                    id: 4,
                },
            ],
            // 门店筛选
            cateStoresState: 0,
            storesStateList: [
                {
                    name: "全部门店",
                    id: "",
                },
            ],
            // 经手人筛选
            cateHandlersState: 0,
            HandlersStateList: [
                {
                    name: "全部经手人",
                    uid: "",
                },
            ],

            cateYdListState: 0,
            ydsList: [
                {
                    name: "全部云店",
                    id: "",
                },
            ],
        };
    },
    async created() {
        // console.log("根据权限判断是否展示单据状态筛选",this.showFiltersBillsState);
        this.storesState = this.filltersData.storesState;
        this.handlersState = this.filltersData.handlersState;

        // 初始化门店数据&经手人数据
        this.createdShopList();
        this.isHandlers = await accessCtrl.getLimitBillViewOther();
        if (this.isHandlers) this.createdUcpList();
        this.createdYdList();
    },

    methods: {
        /****云店列表*****/
        toggleYdListStateMask(type) {
            if (type == "show") {
                this.toggleBillYdStateMask();
                this.toggleHandlersStateMask();
                this.toggleTimeStateMask();
                this.toggleBillsStateMask();
                this.toggleStoresStateMask();
            }
            let timer = type === "show" ? 10 : 200;
            let state = type === "show" ? 1 : 0;
            this.cateYdListState = 2;
            setTimeout(() => {
                this.cateYdListState = state;
            }, timer);
        },

        /****选择云店*****/
        changeYdListState(item) {
            if (this.filltersData.ydListStateIdex == item.id) return;
            this.filltersData.ydListStateIdex = item.id;
            this.filltersData.ydListState = item.name;
            this.$emit("setYunShopId", item.id);
        },

        /*****云店单据*****/
        toggleBillYdStateMask(type) {
            if (type == "show") {
                this.toggleYdListStateMask();
                this.toggleHandlersStateMask();
                this.toggleTimeStateMask();
                this.toggleBillsStateMask();
                this.toggleStoresStateMask();
            }
            let timer = type === "show" ? 10 : 200;
            let state = type === "show" ? 1 : 0;
            this.cateYdState = 2;
            setTimeout(() => {
                this.cateYdState = state;
            }, timer);
        },

        /*** 云店单据选择,未付款，已付款，全部    ***/
        changeBillsYdStatus(item) {
            if (this.filltersData.ydBillStateIndex == item.id) return;
            this.filltersData.ydBillStateIndex = item.id;
            this.filltersData.ydBillsState = item.title;
            this.$emit("setST", item.id);
        },

        /***  初始化门店数据  SHOP_LS ***/
        async createdShopList() {
            let url = config.SHOP_LS;
            let param = {};
            param.ismy = 1;
            let res = await this.$api({ url: url, data: param });
            if (!res) return;
            // console.log("初始化门店数据",res);
            this.storesStateList = this.storesStateList.concat(res.data);
        },

        async createdYdList() {
            let that = this;
            let param = {};
            let cp = await localStore.getCpInfo();
            param.cpid = cp.id;
            param.nt_all = 2;
            https.loadYdlist(param, back);
            function back(data) {
                if (!data) return;
                if (data.status == 1) {
                    if (!data.data) return;
                    data = data.data;
                    let len = data.length;
                    for (let i = 0; i < len; i++) {
                        let temp = data[i];
                        let obj = {};
                        obj.id = temp.id;
                        obj.name = temp.name;
                        that.ydsList.push(obj);
                    }
                }
            }
        },

        /*** 初始化经手人数据	UCP_LS  ***/
        async createdUcpList() {
            let url = config.UCP_LS;
            let param = {};
            param.md = "xs";
            param.ch = 2;
            let res = await this.$api({ url: url, data: param });
            if (res && res.status == 1) {
                if (!res.data) return;
                this.HandlersStateList = this.HandlersStateList.concat(
                    res.data
                );
            }
        },

        /*** 打开经手人统计方式  --  开始 ***/
        changeHandlersState(item) {
            if (this.filltersData.HandlersStateIndex == item.uid) return;
            this.filltersData.HandlersStateIndex = item.uid;
            this.filltersData.handlersState = item.name;
            this.$emit("setHandlers", item.uid);
        },

        /*** 切换单据类型时  重置所有下拉 ***/
        resetFilters() {
            this.toggleYdListStateMask();
            this.toggleBillYdStateMask();
            this.toggleTimeStateMask();
            this.toggleBillsStateMask();
            this.toggleStoresStateMask();
            this.toggleHandlersStateMask();
        },

        //显示分类面板
        toggleHandlersStateMask(type) {
            if (type == "show") {
                this.toggleYdListStateMask();
                this.toggleBillYdStateMask();
                this.toggleTimeStateMask();
                this.toggleBillsStateMask();
                this.toggleStoresStateMask();
            }
            let timer = type === "show" ? 10 : 200;
            let state = type === "show" ? 1 : 0;
            this.cateHandlersState = 2;
            setTimeout(() => {
                this.cateHandlersState = state;
            }, timer);
        },
        /*** 打开经手人统计方式  --  结束 ***/

        /*** 打开时间统计方式  --  开始 ***/
        changeTimeState(item) {
            if (this.filltersData.TimeStateIndex == item.id) return;
            this.filltersData.TimeStateIndex = item.id;
            this.filltersData.timeState = item.title;
            this.$emit("setTime", item.id);
        },
        toggleTimeStateMask(type) {
            console.log("type==1111= time=this.orderData====:", this.orderData);
            if (type == "show") {
                this.toggleYdListStateMask();
                this.toggleBillYdStateMask();
                this.toggleBillsStateMask();
                this.toggleStoresStateMask();
                this.toggleHandlersStateMask();
            }
            let timer = type === "show" ? 10 : 200;
            let state = type === "show" ? 1 : 0;
            this.cateTimeState = 2;
            setTimeout(() => {
                this.cateTimeState = state;
            }, timer);
        },
        /*** 打开时间统计方式  --  结束 ***/

        /*** 打开门店统计方式  --  开始 ***/
        changeStoresState(item) {
            if (this.filltersData.StoresStateIndex == item.id) return;
            this.filltersData.StoresStateIndex = item.id;
            this.filltersData.storesState = item.name;
            this.$emit("setShopid", item.id);
        },
        //显示分类面板
        toggleStoresStateMask(type) {
            if (type == "show") {
                this.toggleYdListStateMask();
                this.toggleBillYdStateMask();
                this.toggleTimeStateMask();
                this.toggleBillsStateMask();
                this.toggleHandlersStateMask();
            }
            let timer = type === "show" ? 10 : 200;
            let state = type === "show" ? 1 : 0;
            this.cateStoresState = 2;
            setTimeout(() => {
                this.cateStoresState = state;
            }, timer);
        },
        /*** 打开门店统计方式  --  结束 ***/

        /*** 打开出库统计方式   --  开始  ***/
        changeBillsState(item) {
            if (this.filltersData.statisticalIndex == item.id) return;
            this.filltersData.statisticalIndex = item.id;
            this.filltersData.billsState = item.title;
            this.$emit("setST", item.id);
        },
        //显示分类面板
        toggleBillsStateMask(type) {
            if (type == "show") {
                this.toggleYdListStateMask();
                this.toggleBillYdStateMask();
                this.toggleTimeStateMask();
                this.toggleStoresStateMask();
                this.toggleHandlersStateMask();
            }
            let timer = type === "show" ? 10 : 200;
            let state = type === "show" ? 1 : 0;
            this.cateBillsState = 2;
            setTimeout(() => {
                this.cateBillsState = state;
            }, timer);
        },
        /*** 打开出库统计方式   --  结束  ***/

        onClickPageHandler() {
            if (this.cateYdListState == 1) this.toggleYdListStateMask();

            if (this.cateYdState == 1) this.toggleBillYdStateMask();

            if (this.cateBillsState == 1) this.toggleBillsStateMask();

            if (this.cateTimeState == 1) this.toggleTimeStateMask();

            if (this.cateStoresState == 1) this.toggleStoresStateMask();

            if (this.cateHandlersState == 1) this.toggleHandlersStateMask();
        },
    },
};
</script>
<style lang="scss">
.screening-box {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0px 6px;
    height: 40px;
    background: #f3f3f2;
    // border-bottom: 1px solid #ECECEC;
    view {
        cursor: pointer;
        font-size: 14px;
        max-width: 120px;
        text {
            padding-left: 4px;
            font-size: 8px;
            color: #333;
        }
    }
    .divider {
        color: #ccc;
    }
}
.cate-mask {
    margin-top: 20px;
}
.cate-list {
    max-height: 480px;
    view {
        padding-left: 10px;
        line-height: 30px;
        font-size: 15px;
        cursor: pointer;
    }
    view:hover {
        background-color: #ddd;
    }
}
.active {
    color: #007aff;
}
</style>